<template>
  <div class="app-container">
    <div style="background: #ebeef5;">
      <el-row style="background: #fff;">
        <el-col
          :span="4"
        ><div
          class="grid-content bg-purple-dark"
          style="padding-top: 40px;text-align: center;max-width: 80px;max-height: 66px;margin-left: 100px;"
        >
          <span v-if="accountMessage.vipLevel == 'LV1'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V1.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV2'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V2.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV3'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V3.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV4'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V4.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV5'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V5.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV6'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V6.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV7'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V7.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV8'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V8.png"></span>
          <span v-if="accountMessage.vipLevel == 'LV9'"><img style="width: 100%;height: 100%;" src="../../../assets/imgs/V9.png"></span>
          <span v-if="!accountMessage.vipLevel" style="padding-top: 40px;font-size: 40px;color:#16ad61;font-weight: bold;">--</span>
          <!-- {{ accountMessage.vipLevel ? accountMessage.vipLevel : '--' }} -->
        </div></el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <div style="color: #999;">Balance</div>
            <div style="color: #333;">{{ accountMessage.balance ? (accountMessage.balance / 100) + 'USD' : '0USD' }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <div style="color: #999;">Credit Limit</div>
            <div style="color: #333;">{{ accountMessage.creditLimit ? (accountMessage.creditLimit / 100) : '0' }}USD</div>
          </div>
        </el-col>
        <!-- <el-col :span="3">
          <div class="grid-content bg-purple-dark">
            <div>未出账单</div>
            <div>{{ accountMessage.waitPay }}USD</div>
          </div>
        </el-col> -->
        <!-- <el-col :span="3">
          <div class="grid-content bg-purple-dark">
            <div>冻结</div>
            <div>11</div>
          </div>
        </el-col> -->
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <div style="color: #999;">Wait Pay</div>
            <div style="color: #333;">{{ accountMessage.waitPay ? (accountMessage.waitPay / 100) + 'USD' : '0USD' }}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <div style="color: #999;">Status</div>
            <div style="color: #333;">
              {{ accountMessage.status === '0' ? 'Not Paid' : 'Settled' }}
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div
            class="grid-content bg-purple-dark"
            style="height: 145px;line-height: 145px;text-align: center;"
          >
            <el-button
              type="primary"
              @click="RechargeBtn(accountMessage.id)"
            >Recharge Now</el-button>
          </div>
        </el-col>
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark"
            style="text-align: right;padding: 0 10px 10px;border-bottom: 1px solid #ebeef5;margin-bottom: 20px;"
          >
            <span>The account is updated at
              <strong>{{ accountMessage.updateDate ? accountMessage.updateDate : '--' }}</strong>，If you have any questions, please contact customer
              service!</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- <div style="border: 1px solid #ebeef5;padding: 10px;margin-bottom: 20px">
      <el-row>
        <el-col :span="24">
          <div
            class="grid-content bg-purple-dark"
            style="text-align: center;color: #16AD61;"
          >
            <span>{{ levelMessage ? levelMessage : '--' }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-bottom: 20px">
      <el-row>
        <el-col :span="24">
          <div class="bg-purple-dark" style="text-align: center;">
            <div class="des-account">
              <strong>{{ currentStep.name ? currentStep.name : '--' }}</strong>，enjoy <strong>{{ currentStep.productDiscount ? currentStep.productDiscount : '--' }}</strong> off
              original price
            </div>
            <div v-if="levelStepsData.length" class="el-steps el-steps--horizontal">
              <div
                v-for="(item, index) in levelStepsData"
                :key="item.id"
                class="el-step is-horizontal is-center"
                style="flex-basis: 50%; max-width: 100%;"
              >
                <div class="el-step__head">
                  <div
                    class="el-step__line"
                    :class="{
                      active:
                        selectLine !== 0 &&
                        selectLine > index &&
                        currentStep.id !== item.id,
                    }"
                    style="top: 20px;"
                  >
                    <i class="el-step__line-inner" />
                  </div>
                  <div
                    class="el-step__icon is-text"
                    :class="{
                      active: selectLine >= index,
                      noActive:
                        currentStep.id !== item.id && selectLine < index,
                    }"
                    style="width: 40px;height: 40px;"
                  >
                    <div class="el-step__icon-inner" :title="item.name">
                      <i
                        v-if="selectLine >= index"
                        class="el-step__icon-inner is-status el-icon-check"
                      />
                      <span
                        v-if="currentStep.id !== item.id && selectLine < index"
                      >{{ item.name ? item.name : '--' }}</span>
                    </div>
                    <div v-if="currentStep.id === item.id" class="sigle-up" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div> -->
    <list-page :page-name="pageName" :list-recharge="listRecharge" :titles="title" />
    <!--充值弹框 -->
    <recharge-dialog v-if="dialogVisible" @close="closeDialog" />
  </div>
</template>

<script>
import ListPage from '../components/listPage';
import RechargeDialog from '../components/rechargeDialog';
import { myVipsPage, myAccountMessage, myAccountSummary } from '@/api/finance';
export default {
  components: {
    ListPage,
    RechargeDialog
  },
  data() {
    return {
      pageName: 'personel',
      currentStep: {},
      accountMessage: {},
      levelMessage: '',
      selectLine: 0,
      listRecharge: 0,
      levelStepsData: [],
      dialogVisible: false,
      title: [
        {
          name: 'BillNo',
          value: 'billCode',
          isBtn: '0'
        },
        {
          name: 'Create Time',
          value: 'createTime',
          isBtn: '0'
        },
        {
          name: 'Total Amount',
          value: 'totalAmount',
          isBtn: '0'
        },
        {
          name: 'Pending Payments',
          value: 'pendingPayments',
          isBtn: '0'
        },
        {
          name: 'Paid',
          value: 'amountPaid',
          isBtn: '0'
        },
        {
          name: 'Status',
          value: 'status',
          isBtn: '0'
        }
      ]
    };
  },
  mounted() {
    this.init();
    this.getMessage();
    this.getSummary();
  },
  methods: {
    init() {
      myVipsPage().then((res) => {
        if (res.code === 200) {
          this.levelStepsData = res.data.levelList;
          this.currentStep = res.data.curLevel;
          this.selectLine = (this.levelStepsData || []).findIndex(
            (item) => item.id === this.currentStep.id
          );
        }
      });
    },
    getMessage() {
      myAccountMessage().then((res) => {
        if (res.code === 200) {
          this.levelMessage = res.data;
        }
      });
    },
    getSummary() {
      myAccountSummary().then((res) => {
        // console.log(res.data);
        if (res.code === 200) {
          this.accountMessage = res.data;
        }
      });
    },
    RechargeBtn(id) {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.grid-content {
  > div {
    margin-top: 35px;
    text-align: center;
    // font-weight: bold;
    font-size: 20px;
  }
}
.sigle-up {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid #eeeeee;
  position: absolute;
  top: -23px;
}
.el-step__icon {
  position: relative;
}
.des-account {
  margin-bottom: 20px;
  background: #eeeeee;
  padding: 10px;
}
.active {
  color: #ffffff;
  background: #59b8bf;
}
.noActive {
  color: gray;
  background: #ffffff;
}
.el-step__icon-inner {
  width: 100%;
  /* height: 100%; */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
